<template>
	<view class="page">
		<u-sticky v-if="changci_list.length" offset-top="0">
			<view class="time-wrap">
				<scroll-view scroll-x="true" class="scroll-container">
					<view class="scroll-box">
						<view class="time-list ">
							<view class="time-item " v-for="(item,index) in changci_list" :key="index"
								:class="{current: changci_select.seckillId == item.seckillId}" @click="toggleChangci(item)">
								<view class="title">
									{{item.hour}}
								</view>
								<view class="status">
									{{item.statusText}}
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-sticky>


		<view class="page-ctx">
			<view class="count-down-info flex-between" v-if="has_flashsale">
				<view class="left-box flex">
					<image src="@/static/product/flash-time.png" mode=""></image>
					<text class="label">
						<!-- 抢购中 -->
						{{changci_select.statusText}}
					</text>
				</view>
				<view class="right-box flex">
					<text class="label">
						<!-- 距离结束： -->
						{{changci_select.tipText}}
					</text>
					<view class="count-down-wrap">
						<!-- <count_down_in_product_list :time="time_flashSale" /> -->
						<view class="count-down-wrap">
							<u-count-down :time="time_flashSale" format="HH:mm:ss" autoStart :millisecond="false"
								@change="onCountdownChange">
								<view class="time flex">
									<view class="time__custom">
										<text class="time__custom__item">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}</text>
									</view>
									<text class="time__doc">:</text>
									<view class="time__custom">
										<text
											class="time__custom__item">{{ timeData.minutes>=10?timeData.minutes:'0'+timeData.minutes }}</text>
									</view>
									<text class="time__doc">:</text>
									<view class="time__custom">
										<text
											class="time__custom__item">{{ timeData.seconds>=10?timeData.seconds:'0'+timeData.seconds }}</text>
									</view>
								</view>
							</u-count-down>
						</view>

					</view>
				</view>
			</view>

			<view class="product-wrap">
				<view class="product-list">
					<view class="product-item flex" v-for="(item,index) in products" :key="index" @click="to_detail(item)">
						<view class="poster-box">
							<image class="poster" :src="item.thumb" mode="aspectFill"></image>
						</view>

						<view class="info-box">
							<view class="title-box ">
								<view class="title ellipsis-1">
									{{item.title}}
								</view>
							</view>
							<view class="desc ellipsis-1">
								{{item.remark}}
							</view>
							<view class="orders">
								已售：{{item.orders}}
							</view>
							<view class="percent-box">
								<view class="percent-bg">

								</view>
								<view class="highlight-bg" :style="{width: item.percent}">
									<view class="highlight-value">
										<!-- 50% -->
										{{item.percent}}
									</view>
								</view>
							</view>
							<view class="price-box flex-between">
								<view class="price-left flex">
									<view class="price">
										<text class="huobi">￥</text>
										<text class="price-val">{{item.priceSale || 0}}</text>
									</view>
									<view class="price-line">
										<text class="huobi">￥</text>
										<text class="price-val"> {{item.priceMarket || 0}}</text>
									</view>
								</view>
								<view class="btn flex-center" :class="{dis: changci_select.ifStart == 0}">
									立即抢购
								</view>
							</view>
						</view>
					</view>
				</view>

				<view style="margin-top: 40rpx;" v-if="has_flashsale">
					<u-loadmore :status="loadmore_status" />
				</view>

				<w_empty v-if="!has_flashsale" emptyText="未查询到秒杀信息~"></w_empty>
			</view>
		</view>
	</view>
</template>

<script>
	import dayjs from 'dayjs'

	import count_down_in_product_list from '@/components/count-down/count_down_in_product_list.vue'
	export default {
		components: {
			count_down_in_product_list,
		},
		data() {
			return {
				changci_list: [],
				changci_select: {
					statusText: '即将开始',
					tipText: '距离开始:',
				},
				time_flashSale: 0,
				//
				products: [],
				pagination: {
					page: 1,
					pageNum: 10
				},
				loadmore_status: 'loadmore', //loadmore  / loading / nomore
				//

				timeData: {},
			}
		},

		computed: {
			has_flashsale() {
				return this.changci_select.seckillId
			}
		},

		onLoad(option) {

		},
		onShow() {
			this.initQuery();
			this.query_changci()
		},

		onReachBottom() {
			this.loadMore()
		},

		methods: {
			setNavbarTitle(title) {
				uni.setNavigationBarTitle({
					title: title
				})
			},
			loadMore() {
				if (this.loadmore_status == 'loadmore') {
					this.loadmore_status = 'loading'
					this.pagination.page++;
					this.query_product();
				}
			},
			initQuery() {
				this.products = [];
				this.pagination.page = 1;
				this.loadmore_status = 'loadmore'
			},

			query_changci() {
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'product_plist',
						ifSeckill: 1,
					},
				}).then(res => {
					if (res.code == 200) {
						let data = res.data;
						// this.set_miaosha(data)


						let changci_list = data.timeList;
						this.daojishi_time_ms = data.second * 1000;

						changci_list.forEach(v => {
							// let today_date_text = dayjs().format('YYYY-MM-DD')
							// let startTime = dayjs(today_date_text + ' ' + v.time).valueOf() / 1000
							//v.startTime = startTime;
							v.statusText = v.ifStart == 0 ? '即将开始' : '抢购中'; //当前状态(0未开始 1进行中)
							v.tipText = v.ifStart == 0 ? '距离开始：' : '距离结束：'; //当前状态(0未开始 1进行中)
						})
						this.changci_list = changci_list; //  [...list, ...list, ...list, ...list];
						this.$log('秒杀活动列表', this.changci_list)
						if (this.changci_list.length) {
							this.changci_select = this.changci_list[0];
							if (this.changci_select.ifStart == 0) { //秒杀未开始
								this.time_flashSale = data.second * 1000 || dayjs(this.changci_select.startTime).diff(dayjs(),
									'millisecond');
								this.query_product();
							} else {
								this.time_flashSale = data.second * 1000;
								this.products = data.list;
							}
						}

					}
				})
			},


			// set_miaosha(data) {
			// 	let changci_list = data.timeList;
			// 	this.daojishi_time_ms = data.second * 1000;

			// 	changci_list.forEach(v => {
			// 		// let today_date_text = dayjs().format('YYYY-MM-DD')
			// 		// let startTime = dayjs(today_date_text + ' ' + v.time).valueOf() / 1000
			// 		//v.startTime = startTime;
			// 		v.statusText = v.ifStart == 0 ? '即将开始' : '抢购中'; //当前状态(0未开始 1进行中)
			// 		v.tipText = v.ifStart == 0 ? '距离开始：' : '距离结束：'; //当前状态(0未开始 1进行中)
			// 	})
			// 	this.changci_list = changci_list; //  [...list, ...list, ...list, ...list];
			// 	this.$log('秒杀活动列表', this.changci_list)
			// 	if (this.changci_list.length) {
			// 		this.changci_select = this.changci_list[0];
			// 		this.time_flashSale = data.second * 1000;
			// 		// this.query_product();
			// 	}
			// },


			set_product(data) {
				let list = data.list;
				list.forEach(v => {
					v.percent = this.changci_select.ifStart == 0 ? '0%' : (Math.random() * 100).toFixed(2) + '%'
				})

				this.products = this.products.concat(list);
				this.loadmore_status = data.count > this.products.length ? 'loadmore' : 'nomore';
			},


			//切换秒杀场次
			toggleChangci(item) {
				if (this.changci_select.seckillId == item.seckillId) {
					return
				}
				this.changci_select = item;

				this.showLoading({
					title: '秒杀商品查询中'
				});
				this.initQuery();
				this.query_product();
			},

			query_product() {
				this.$log('当前秒杀', this.changci_select)
				let params = {}
				if (this.changci_select.ifStart == 1 || !this.changci_select.seckillId) {
					//正在进行的秒杀活动
					params = {
						action: 'product_plist',
						ifSeckill: 1,
						...this.pagination,
					}
				} else { //未来时段的活动
					params = {
						action: 'product_plist',
						seckillId: this.changci_select.seckillId,
						...this.pagination,
					}
				}


				this.$api({
					url: '/service.php',
					method: 'get',
					data: params,
				}).then(res => {
					if (res.code == 200) {
						let data = res.data;
						let list = data.list;
						list.forEach(v => {
							v.percent = this.changci_select.ifStart == 0 ? '0%' : v.bili + '%'
						})

						this.products = this.products.concat(list);
						this.loadmore_status = data.count > this.products.length ? 'loadmore' : 'nomore';

						if (!this.changci_list.length) {
							this.set_miaosha(data)
						}
					}
				})
			},

			to_detail(item) {
				if (this.changci_select.ifStart != 1) {
					this.$alert('秒杀活动未开始')
					return
				}
				this.toRoute({
					path: '/product-detail',
					query: {
						id: item.inventoryId,
					}
				})
			},

			//倒计时
			onCountdownChange(e) {
				// console.log('倒计时变化', e)
				this.timeData = e;
			}

		}
	}
</script>

<style lang="scss">
	page {
		background: #F8F8F8;
	}
</style>
<style lang="scss" scoped>
	.page {}

	.page-ctx {
		padding: 32rpx;
	}


	.time-wrap {
		background: #fff;

		.time-list {
			white-space: nowrap;

			.time-item {
				display: inline-flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				width: 150rpx;
				height: 150rpx;
				text-align: center;

				&.current {
					background: #CB0011;

					.title {
						font-weight: bold;
						color: #FFFFFF;
					}

					.status {
						font-weight: bold;
						color: #FFFFFF;
					}
				}

				.title {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 32rpx;
					color: #000000;
				}

				.status {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #000000;
				}
			}
		}
	}


	.count-down-info {
		padding: 0 24rpx;
		height: 88rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;

		.left-box {
			image {
				width: 32rpx;
				height: 32rpx;
			}

			.label {
				margin-left: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #CB0011;
			}
		}

		.right-box {
			.label {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #000000;
			}

			.count-down-wrap {}
		}
	}


	.product-wrap {}

	.product-item {
		margin-bottom: 16rpx;
		padding: 40rpx 24rpx;
		background: #fff;

		.poster-box {
			width: 200rpx;
			height: 200rpx;

			image {
				width: 200rpx;
				height: 200rpx;
			}
		}

		.info-box {
			padding-left: 32rpx;
			flex: 1;
			overflow: hidden;

			.title-box {
				.title {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #000000;
				}
			}

			.desc {
				margin-top: 10rpx;
				margin-bottom: 10rpx;
				height: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 20rpx;
				color: #838B9E;
			}

			.orders {
				margin-top: 10rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 16rpx;
				color: #B3B9C9;
			}


			.percent-box {
				margin: 24rpx 0;
				margin-bottom: 16rpx;
				position: relative;
				width: 220rpx;
				height: 16rpx;

				.percent-bg {
					width: 220rpx;
					height: 16rpx;
					background: rgba(7, 140, 127, .1);
					border-radius: 8rpx 8rpx 8rpx 8rpx;
				}

				// .percent-highlight {
				// 	position: absolute;
				// 	left: 0;
				// 	top: 0;
				// 	bottom: 0;
				// 	right: 0;
				// }
				.highlight-bg {
					position: absolute;
					left: 0;
					top: 0;
					bottom: 0;
					// width: 220rpx;
					height: 16rpx;
					background: #CB0011;
					border-radius: 8rpx 8rpx 8rpx 8rpx;

					.highlight-value {
						position: absolute;
						right: -40rpx;
						right: -60rpx;

						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 12rpx;
						color: #000000;
					}
				}


			}

			.price-box {
				.price-left {
					.price {

						.huobi {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 24rpx;
							color: #000000;
						}

						.price-val {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 24rpx;
							color: #000000;
						}
					}

					.price-line {
						margin-left: 20rpx;
						flex: 1;
						overflow: hidden;
						text-decoration: line-through;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #B3B9C9;
					}
				}

				.btn {
					width: 140rpx;
					height: 48rpx;
					background: #CB0011;
					border-radius: 24rpx 24rpx 24rpx 24rpx;

					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;

					&.dis {
						background: #cccccc;
					}
				}
			}
		}
	}




	// 倒计时样式
	.count-down-wrap {
		.time {
			align-items: center;

			&__custom {
				width: 30rpx;
				height: 35rpx;
				background: #CB0011;
				border-radius: 4px;
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				justify-content: center;
				align-items: center;

				&__item {
					color: #fff;
					font-size: 12px;
					text-align: center;
				}
			}

			&__doc {
				color: #333333;
				padding: 0px 4px;
			}

			&__item {
				color: #606266;
				font-size: 15px;
				margin-right: 4px;
			}
		}
	}
</style>